import React from 'react';
import { SvgIcon } from '@/components/icon';

interface GuessQuestion {
  id: string;
  content: string;
}

interface GuessYouWantToAskProps {
  questions: GuessQuestion[];
  onQuestionClick: (question: string) => void;
}

const GuessYouWantToAsk: React.FC<GuessYouWantToAskProps> = ({ questions, onQuestionClick }) => {
  if (!questions || questions.length === 0) {
    return null;
  }

  return (
    <div className="my-3">
      {/* 标题栏 */}
      <div
        className="flex items-center mb-2"
        style={{
          display: 'flex',
          alignItems: 'center'
        }}
      >
        <SvgIcon icon='rj-guess' size={14} color='#8890ff' />
        <div
          style={{
            fontWeight: 400,
            // fontSize: '14px',
            color: '#474C5F',
            marginLeft: '8px',
            marginRight: '8px'
          }}
        >
          猜你想问
        </div>
        <div
          style={{
            height: '1px',
            marginTop: '0.25rem',
            background: '#e8ebf0',
            flex: '1 1 0%'
          }}
        />
      </div>

      {/* 问题列表 */}
      <div className="flex flex-wrap gap-2 ml-2">
        {questions.map((question) => (
          <div
            key={question.id}
            className="px-2 py-1 rounded-full cursor-pointer bg-[#F1F3F9] hover:bg-[#E0E2F9]"
            style={{ maxWidth: '100%' }}
            onClick={() => onQuestionClick(question.content)}
          >
            <div className="truncate" style={{
              fontWeight: 400,
              // fontSize: '14px',
              color: '#474C5F'
            }}>
              {question.content}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default GuessYouWantToAsk; 